
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Tag Completion using Query Delimiters</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style>
#ac-input { width: 250px; }
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Tag Completion using Query Delimiters</h1>

<div class="exampleIntro">
	<p>
This example demonstrates how to use the <code>queryDelimiter</code> config, a custom result filter, and a couple of event handlers to provide suggestions as a user enters tags in an input field. The result list is prepopulated with suggested tags and is displayed immediately when the input field receives focus rather than waiting for the user to begin typing.
</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
  <label for="ac-input">Tags:</label><br>
  <input id="ac-input" type="text">
</div>

<script>
YUI({ filter: 'raw' }).use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  var inputNode = Y.one('#ac-input'),
      tags = [
        'css',
        'css3',
        'douglas crockford',
        'ecmascript',
        'html',
        'html5',
        'java',
        'javascript',
        'json',
        'mootools',
        'node.js',
        'pie',
        'yui'
      ];

  inputNode.plug(Y.Plugin.AutoComplete, {
    activateFirstItem: true,
    allowTrailingDelimiter: true,
    minQueryLength: 0,
    queryDelay: 0,
    queryDelimiter: ',',
    source: tags,
    resultHighlighter: 'startsWith',

    // Chain together a startsWith filter followed by a custom result filter
    // that only displays tags that haven't already been selected.
    resultFilters: ['startsWith', function (query, results) {
      // Split the current input value into an array based on comma delimiters.
      var selected = inputNode.ac.get('value').split(/\s*,\s*/);

      // Pop the last item off the array, since it represents the current query
      // and we don't want to filter it out.
      selected.pop();

      // Convert the array into a hash for faster lookups.
      selected = Y.Array.hash(selected);

      // Filter out any results that are already selected, then return the
      // array of filtered results.
      return Y.Array.filter(results, function (result) {
        return !selected.hasOwnProperty(result.text);
      });
    }]
  });

  // When the input node receives focus, send an empty query to display the full
  // list of tag suggestions.
  inputNode.on('focus', function () {
    inputNode.ac.sendRequest('');
  });

  // After a tag is selected, send an empty query to update the list of tags.
  inputNode.ac.after('select', function () {
    inputNode.ac.sendRequest('');
    inputNode.ac.show();
  });
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
